<template>
  <view class="navigation-container">
    <!-- 地图显示区域 -->
    <view class="map-container">
      <map 
        id="navigationMap" 
        class="map"
        :latitude="userLocation.latitude || 35.246065"
        :longitude="userLocation.longitude || 113.385857"
        :scale="16"
        :markers="markers"
        :show-location="true"
        style="width: 100%; height: 100%;"
      ></map>
    </view>
    
    <!-- 目的地信息展示 -->
    <view class="destination-info">
      <view class="destination-header">
        <view class="destination-icon">🏠</view>
        <view class="destination-content">
          <view class="destination-name">{{ destination.name }}</view>
          <view class="destination-address">{{ destination.address }}</view>
        </view>
      </view>
    </view>
    
    <!-- 导航按钮 -->
    <view class="navigation-button">
      <button class="nav-btn" @click="startNavigation" type="primary">
        <text class="nav-icon">🧭</text>
        <text>开始导航</text>
      </button>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      destination: {
    
      },
      userLocation: {
        latitude: 0,
        longitude: 0
      },
      merchantSelected: null,
      markers: [],
      mapContext: null
    }
  },
  onLoad() {
    // Get merchant data from storage
    try {
      const merchantData = uni.getStorageSync('merchantSelected');
      if (merchantData) {
        this.merchantSelected = JSON.parse(merchantData);
        // Update destination with merchant data if available
        if (this.merchantSelected) {
          this.destination = {
            name: this.merchantSelected.name || this.destination.name,
            address: this.merchantSelected.address || this.destination.address,
            latitude: parseFloat(this.merchantSelected.latitude) || this.destination.latitude,
            longitude: parseFloat(this.merchantSelected.longitude) || this.destination.longitude
          };
        }
      }
    } catch (error) {
      console.error('Failed to parse merchant data:', error);
    }
    
    // Get map context
    this.mapContext = uni.createMapContext('navigationMap', this);
    
    // Get current location
    this.getUserLocation();
  },
  computed: {},
  methods: {
    // 获取用户当前位置
    getUserLocation() {
      const _this = this;
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          const latitude = res.latitude;
          const longitude = res.longitude;
          _this.setMapCenter(latitude, longitude);
          _this.addMapMarkers(latitude, longitude, _this.destination.latitude, _this.destination.longitude);
        },
        fail(err) {
          console.error('获取位置失败:', err);
        }
      });
    },
    
    // 设置地图中心点
    setMapCenter(latitude, longitude) {
      this.mapContext.moveToLocation({
        latitude,
        longitude,
        success() {
          console.log('地图移动到当前位置');
        }
      });
    },
    
    // 添加地图标记
    addMapMarkers(userLat, userLng, destLat, destLng) {
      this.userLocation = { latitude: userLat, longitude: userLng };
      this.markers = [
        {
          id: 1,
          latitude: userLat,
          longitude: userLng,
          width: 30,
          height: 30,
          iconPath: '/static/my-location.jpg',
          title: '当前位置'
        },
        {
          id: 2,
          latitude: destLat,
          longitude: destLng,
          width: 30,
          height: 30,
          iconPath: '/static/index.png', // 使用现有的图标作为目的地标记
          title: this.destination.name
        }
      ];
    },
    
    // 开始导航
    startNavigation() {
      uni.openLocation({
        latitude: this.destination.latitude,
        longitude: this.destination.longitude,
        name: this.destination.name,
        address: this.destination.address,
        scale: 18,
        success() {
          console.log('打开位置成功');
        },
        fail(err) {
          console.error('打开位置失败:', err);
        }
      });
    }
  },
  watch: {},

  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style scoped>
.navigation-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.map-container {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.destination-info {
  position: absolute;
  bottom: 90px;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 0 16px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.destination-header {
  display: flex;
  align-items: center;
}

.destination-icon {
  font-size: 24px;
  margin-right: 12px;
}

.destination-content {
  flex: 1;
}

.destination-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.destination-address {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.navigation-button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.95);
  text-align: center;
}

.nav-btn {
  width: 100%;
  height: 50px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07c160;
  border: none;
}

.nav-icon {
  font-size: 20px;
  margin-right: 8px;
}

/* 适配不同屏幕尺寸 */
@media screen and (min-height: 600px) {
  .destination-info {
    bottom: 100px;
  }
}
</style>